import 'package:flutter/material.dart';
import 'dart:math' as math;

/// 变换（Transform）
class TransformRoute extends StatefulWidget {
  @override
  _TransformRouteState createState() => _TransformRouteState();
}

class _TransformRouteState extends State<TransformRoute> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("变换 Transform"),
      ),
      body: _TransformRouteBody(),
    );
  }
}

class _TransformRouteBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(50.0),
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Text("矩阵变换"),
              Container(
                margin: EdgeInsets.symmetric(vertical: 20.0),
                color: Colors.black,
                child: new Transform(
                  alignment: Alignment.topRight, //相对于坐标系原点的对齐方式
                  transform: new Matrix4.skewY(0.3), // 沿y轴倾斜0.3弧度
                  child: new Container(
                    padding: const EdgeInsets.all(8.0),
                    color: Colors.deepOrange,
                    child: const Text("Apartment for rent!"),
                  ),
                ),
              )
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Text("平移"),
              Container(
                color: Colors.red,
                margin: EdgeInsets.symmetric(vertical: 20.0),
                child: Transform.translate(
                  offset: Offset(-20.0, -10.0),
                  child: Text("Hello World"),
                ),
              ),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Text("旋转"),
              Container(
                color: Colors.red,
                margin: EdgeInsets.symmetric(vertical: 50.0),
                child: Transform.rotate(
                  origin: Offset(0.0, 10.0),
                  angle: math.pi / 2, //旋转90度
                  child: Text("Hello World"),
                ),
              ),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Text("缩放"),
              Container(
                color: Colors.red,
                margin: EdgeInsets.symmetric(vertical: 30.0),
                child: Transform.scale(
                  scale: 2.0, // 放大两倍
                  child: Text("Hello World"),
                ),
              ),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              DecoratedBox(
                  decoration: BoxDecoration(color: Colors.red),
                  child:
                      Transform.scale(scale: 1.5, child: Text("Hello world"))),
              Text(
                "你好",
                style: TextStyle(color: Colors.green, fontSize: 18.0),
              )
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text("RotatedBox"),
              DecoratedBox(
                decoration: BoxDecoration(color: Colors.red),
                child: RotatedBox(
                  quarterTurns: 1, //旋转90度 1/4
                  child: Text("Hello World"),
                ),
              ),
              Text(
                "您好",
                style: TextStyle(color: Colors.green, fontSize: 18.0),
              ),
            ],
          ),
        ],
      ),
    );
  }
}
